/*eslint-disable*/
import React from 'react';
import L from 'leaflet';
import { Icon } from 'antd';
import { drawColis } from "./svgColi";
import { isDataValid, getTyphoonGradeInfo } from "./typhoon";
import * as utils from '../../assets/js/utils/index';
import moment from 'moment';
import tf1 from '../../assets/images/home/typhoon/tf1.gif';
import logo from '../../assets/images/home/typhoon/logo.png';
import imgErr from '../../assets/images/home/typhoon/imgError.png';
import xxLogo from '../../assets/images/home/typhoon/xxzxlogo.png';
import './index.css';
import './leaflet.css';

const CustomerIcon = L.Icon.extend({
    options: {
        iconUrl: tf1,
        iconSize: [28, 28],
    }
});

function getTyphoonPopup(item) {
    if (!item) return ``;
    return `<div>
                 <div class="popup-text" style="color:black;">台风名字：${item.TYPH_Name}</div>
                      <div class="popup-text">过去时间：${moment(item.Datetime,'YYYYMMDDHHmmss').format('YYYY-MM-DD HH:mm:ss')}（UTC）</div>           
                      <div class="popup-text">中心位置：${item.Lat}N/${item.Lon}E</div>
                      <div class="popup-text">最大风速：${item.WIN_S_Conti_Max}米/秒</div>
                      ${isDataValid(item.prs) ? `<div class="popup-text">中心气压：${item.PRS}(百帕)</div>` : ``}
             </div>`
}

export default class MyMap extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            current: -1,
            clickCurrent: 0,
            center: [118, 25],
            time: "",
            start: true,
            img_second: false,
            openPopup: false,
            coliCurrent: 0,
        };
        this.img = React.createRef();  //控制详情页时右边部分图片生成
        this.animation_id = null;
        this.animation_index = 0;
        this.layers = null;
        this.showLogo = true;
        this.showlogoLeft = this.props.showlogoLeft;
        this.download = this.props.download;
        this.switchLanguage = this.props.changeLanguage;
        this.language = [{ ch: "风流场", en: "Flow fields" }, { ch: "风速等值面", en: "Isosurface of wind speed" }, { ch: "风速场", en: "Volume rendering of wind speed" }, { ch: "相对湿度剖面", en: "Relative humidity" }, { ch: "综合", en: "Integration" }];
        this.isIe = utils.getIEVersion();
        this.isFirefox = utils.isFirefox();
    }

    animation = (index) => {
        const current = (this.state.current + 1) % this.props.data.length;   // 选择当前轮播图片（取余）
        const time = this.props.data[current].datetime;
        if (this.animation_index === index) this.handleDatetimeChange(time, current);
    };

    getRandomStr = () => {
        if (!this.isIe && !this.isFirefox) return ".png";
        return `.png?${moment().format("YYYYMMDDhhmmss")}`
    };

    handleDatetimeChange = (datetime, current) => {
        if (this.img.current) {
            this.img.current.src = 'https://i.loli.net/2020/09/10/kUbjexrWuZBO4C7.png';
        };
        if (this.img.current && this.props.data.length > 0) {
            this.mapJumpTo(current);
            this.mapPanTo(this.props.data[current]);
            setTimeout(() => {
                this.setState({
                    current,
                    time: datetime,
                    img: true,
                    center: {
                        longitude: this.props.data[current].Lon,
                        latitude: this.props.data[current].Lat,
                    }
                });
            }, 70);
        }
    };

    handleShowPicture = (datetime) => {
        if (this.img.current) {
            this.img.current.src = this.props.location + datetime + this.getRandomStr();
            this.setState({ time: datetime });
        }
    };

    handleAnimationStop() {
        clearTimeout(this.animation_id);
        this.animation_id = null;
        this.animation_index++;
    }

    mapInit = () => {
        this.setState({ showLogo: true })  //控制图片logo显示
        this.map = L.map("mymap", {
            center: [23.11, 142.35],
            zoom: 6,
            minZoom: 5,
            maxZoom: 7,
            maxBounds: L.latLngBounds(L.latLng(-90, -360), L.latLng(90, 360)),
            extend: [23.11, 142.35, 24, 144],
            attributionControl: false
        });
        L.TileLayer.TiandituLayer = L.TileLayer.extend({
            getTileUrl: function (tilePoint) {
                const url = "https://t" + h + ".tianditu.gov.cn/" + layerType + "_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=" + layerType + "&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&" + "TILECOL=" + tilePoint.x + "&TILEROW=" + tilePoint.y + "&TILEMATRIX=" + tilePoint.z + '&tk=fb96e3854a716aca96e022d90f566713';
                return url;
            }
        });
        L.tileLayer.tiandituLayer = function (options) {
            // return new L.TileLayer.TiandituLayer('', options);
            return new L.tileLayer('http://localhost:8888/FJSW/TMS/{z}/{x}/{-y}.png', options);
        };
        this.imgLayer = L.tileLayer.tiandituLayer({ layerType: "img" });
        this.map.addLayer(this.imgLayer);
        this.map.on("zoom", (e) => {
            if (this.coli) {
                this.coli.remove();
            }
            this.addCoil(this.state.coliCurrent)
        });
    };

    mapDrawCoil = (current) => {
        if (this.coli) {
            this.coli.remove();
        }
        this.addCoil(current)
        this.map_points && this.map_points.forEach(function (item) {
            item.bringToFront();
        }.bind(this))

        this.map_background_points && this.map_background_points.forEach(function (item) {
            item.bringToFront();
        }.bind(this))
    };

    mapAddBackground = (data) => {
        this.map_background_line = L.polyline(data.map((item) => {
            return [item.Lat, item.Lon]
        }), { color: "rgba(200,200,200,.1)", weight: 1 }).addTo(this.map);
        this.map_background_points = data.map((item, index) => {
            const c = L.circleMarker([item.Lat, item.Lon], { radius: 4, fillColor: "cyan", color: "none", fillOpacity: .01, weight: 2 }).addTo(this.map)
                .bindPopup(getTyphoonPopup(item))
                .on('click', function (e) {
                    const currentItem = this.props.data[index];
                    this.mapClearTyphoonIcon();
                    this.mapAddTyphoonIcon(index);
                    this.setState({ start: false })
                    const time = currentItem.datetime;
                    if (index > this.state.current) {
                        this.handleDatetimeChange(time, index);
                        this.handleAnimationStop();
                    } else if (index <= this.state.current) {
                        this.mapDrawCoil(index);
                        this.handleShowPicture(time)
                    }
                    c.openPopup();
                }.bind(this));
            return c;
        });
    };

    mapClearBackground = () => {
        this.map_background_points && this.map_background_points.forEach((item) => {
            item.remove();
        });
        this.map_background_line && this.map_background_line.remove();
    }

    mapJumpTo = (current) => {
        this.mapDrawCoil(current);
        this.mapClearTyphoonIcon();
        this.mapAddTyphoonIcon(current);
        this.mapClearPoints();
        this.mapAddPoints(current);
        this.mapClearLines();
        this.mapAddLines(current);
        this.state.openPopup && this.map_points[current].openPopup();
        this.mapBackgroundPointsBringToFront();
    };

    mapAddTyphoonIcon = (current) => {
        const item = this.props.data[current];
        this.typhoonIcon = new L.Marker([item.Lat, item.Lon], {
            icon: new CustomerIcon(),
            opacity: .5
        }).addTo(this.map)
            .bindPopup(getTyphoonPopup(item))
            .on('click', function (e) {
                this.typhoonIcon.openPopup();
            }.bind(this));
    };

    mapClearTyphoonIcon = () => {
        this.typhoonIcon && this.typhoonIcon.remove();
    };

    mapClearPoints = () => {
        this.map_points && this.map_points.forEach((item) => {
            item.remove();
        })
    };

    mapAddPoints = (current) => {
        this.map_points && this.map_points.forEach((item, index) => {
            if (index <= current) {
                item.addTo(this.map)
            }
        })
    };

    mapSetPoints = (data) => {
        // 页面切换时可能导致this.props.data=null导致报错
        this.map_points = data.map((item, index) => {
            const tpGradeInfo = getTyphoonGradeInfo(item.Typh_Grade); 
            const color = tpGradeInfo.color;
            return L.circleMarker([item.Lat, item.Lon], { radius: 0, color, fillOpacity: 1, weight: 6 })
                .bindPopup(getTyphoonPopup(item));
        });

    };

    mapClearLines = () => {
        this.map_lines && this.map_lines.forEach((item) => {
            item.remove();
        })
    };

    mapAddLines = (current) => {
        this.map_lines && this.map_lines.forEach((item, index) => {
            if (index <= current) {
                item.addTo(this.map)
            }
        })
    };

    mapSetLines = (data) => {
        this.map_lines = data.map((item, index) => {
            if (index === 0) return { addTo() { }, remove() { } }
            const color = getTyphoonGradeInfo(item.Typh_Grade).color;
            return L.polyline([[data[index - 1].Lat, data[index - 1].Lon], [item.Lat, item.Lon]], { color, weight: 2 });
        });
    };

    mapBackgroundPointsBringToFront = () => {
        this.map_background_points.forEach(function (item) {
            item.bringToFront();
        }.bind(this));
    };

    mapPanTo = (item) => {
        if(this.map){
            this.map.panTo([item.Lat, item.Lon]);
            this.props.changeProSouce(moment(item.Datetime,'YYYYMMDDHHmmss').format('YYYY-MM-DD HH:mm:ss'));
        }
    };

    mapClear = () => {
        this.mapClearBackground();
        this.mapClearLines();
        this.mapClearPoints()
        this.coli && this.coli.remove();
        this.mapClearTyphoonIcon();
    };

    setCoils = (data) => {
        this.colis = data.map((item) => {
            const point = this.map.project([item.Lat, item.Lon], 6);
            const params = (1000 / 2);
            const bounds = [
                this.map.unproject([point.x - params, point.y - params], 6),
                this.map.unproject([point.x + params, point.y + params], 6)
            ];
            const arr = [];
            const level = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
            level.forEach((levelItem) => {
                arr[levelItem] = L.svgOverlay(drawColis(item, levelItem), bounds)
            });
            return arr;
        });
    };

    addCoil = (current) => {
        this.setState({ showLogo: false })
        if (!this.colis || !this.map) return;
        const zoom = this.map.getZoom();
        this.setState({
            coliCurrent: current,
        });
        this.coli = this.colis[current][zoom].addTo(this.map);
    };

    handleMapPopupSwiper = () => {
        if (this.state.openPopup) {
            this.setState({ openPopup: false });
        } else {
            this.setState({
                openPopup: true,
                start: true,
            })
            setTimeout(() => {
                this.animation(this.animation_index)
            }, 50);
        }
    };

    handleSwitchLanguage = () => {
        this.switchLanguage = !this.switchLanguage;
        this.props.switchLanguage(this.switchLanguage);
    }

    componentWillReceiveProps(nextProps, nextContext) {
        if (this.props.data !== nextProps.data) {
            this.mapClear();
            this.mapAddBackground(nextProps.data);
            this.mapSetPoints(nextProps.data);
            this.mapSetLines(nextProps.data);
            this.handleAnimationStop();
            this.setState({
                current: -1,
                time: "",
                start: true,
                img: false,
            });
            this.setCoils(nextProps.data);
            this.animation_id = setTimeout(() => {
                this.animation(this.animation_index)
            }, this.props.data ? 1200 : 3000);
        }
        this.state.showLogo = nextProps.showlogo;
        if(this.props.typhoonTime !== nextProps.typhoonTime){
            this.handleAnimationStop();
            if (this.state.current > 0) {
                const time = moment(nextProps.typhoonTime).format('YYYYMMDDHHmmSS');
                let current = 0;
                nextProps.data.map((item, index) => {
                    if(item.Datetime === time){ current = index; }
                });
                this.handleDatetimeChange(time, current);
                this.setState({ start: false });
            }
        }
    }


    componentWillUnmount() {
        this.setState = (state, callback) => {
            return ;
        }
    }

    componentDidMount() {
        this.mapInit();
        this.img.current.onload = () => {
            if (this.state.start) {
                if (this.setTimeoutId) {
                    clearTimeout(this.setTimeoutId)
                }
                if (this.state.current === (this.props.data.length - 2)) {
                    this.setState({
                        start: false
                    }, () => {
                        setTimeout(() => {
                            this.setState({
                                start: true,
                            }, () => {
                                if (this.state.start) {
                                    const current = (this.state.current + 1) % this.props.data.length;
                                    const time = this.props.data[current].datetime;
                                    this.handleDatetimeChange(time, current);
                                    this.map_background_points && this.map_background_points.forEach(item => {
                                        item.closePopup();
                                    })
                                }
                            });
                        }, 14000);
                    });
                } else {
                    this.setTimeoutId = setTimeout(() => {
                        if (this.state.start) {
                            const current = (this.state.current + 1) % this.props.data.length;
                            const time = this.props.data[current].datetime;
                            this.handleDatetimeChange(time, current);
                            this.map_background_points && this.map_background_points.forEach(item => {
                                item.closePopup();
                            });
                        }
                    }, this.state.openPopup ? 1000 : 500);
                }
            }
        };
    }

    render() {
        return (
            <React.Fragment>
                <div style={{ display: "flex", width: '100%', height: "100%" }}>
                    <div className={"mymapbox"}>
                        <div style={{ zIndex: `${this.state.showLogo && this.state.start && this.props.showlogoLeft ? 1000 : 1}`, background: "#073a69", width: "25vw", height: "100%", position: "absolute" }} className={"mymap1"}>
                            <img className={"mymapimg"} src={logo} alt="" />
                        </div>
                        <div className={"mymap"} id={"mymap"} style={{ width: '25vw', height: "100%", zIndex: 2, }} >
                            <div style={{ color: "#eee", position: "absolute", right: 10, top: 10, zIndex: 999 }}>
                                <div style={{ padding: 8, background: "rgba(0,0,0,.5)", fontSize: '1vh', borderRadius: 5, marginBottom: 5 }}>
                                    <div>
                                        <div style={{ padding: "8px 5px" }}>{this.switchLanguage ? "Legend of typhoon ring" : "风圈图例"}</div>
                                        <div style={{ padding: "3px 5px" }}><div style={{ width: 10, height: 10, opacity: 1, background: "#61e412", borderRadius: 20, display: "inline-block", marginRight: 5 }} />{this.switchLanguage ? "Wing_A7" : "7级风圈"}</div>
                                        <div style={{ padding: "3px 5px" }}><div style={{ width: 10, height: 10, opacity: 1, background: "#ccce14", borderRadius: 20, display: "inline-block", marginRight: 5 }} />{this.switchLanguage ? "Wing_A10" : "10级风圈"}</div>
                                        <div style={{ padding: "3px 5px" }}><div style={{ width: 10, height: 10, opacity: 1, background: "#ce1414", borderRadius: 20, display: "inline-block", marginRight: 5 }} />{this.switchLanguage ? "Wing_A12" : "12级风圈"}</div>
                                    </div>
                                    <div>
                                        <div style={{ padding: "8px 5px" }}>{this.switchLanguage ? "Legend of trace point" : "轨迹点图例"}</div>
                                        <div style={{ padding: "3px 5px" }}><div style={{ width: 10, height: 10, opacity: 1, background: "#FD0026", borderRadius: 20, display: "inline-block", marginRight: 5 }} />{this.switchLanguage ? "Super typhoon" : "超强台风"}</div>
                                        <div style={{ padding: "3px 5px" }}><div style={{ width: 10, height: 10, opacity: 1, background: "#FD5C1C", borderRadius: 20, display: "inline-block", marginRight: 5 }} />{this.switchLanguage ? "Severe typhoon" : "强台风"}</div>
                                        <div style={{ padding: "3px 5px" }}><div style={{ width: 10, height: 10, opacity: 1, background: "#FD8B00", borderRadius: 20, display: "inline-block", marginRight: 5 }} />{this.switchLanguage ? "Typhoon" : "台风"}</div>
                                        <div style={{ padding: "3px 5px" }}><div style={{ width: 10, height: 10, opacity: 1, background: "#FDB700", borderRadius: 20, display: "inline-block", marginRight: 5 }} />{this.switchLanguage ? "Severe tropical storm" : "强热带风暴"}</div>
                                        <div style={{ padding: "3px 5px" }}><div style={{ width: 10, height: 10, opacity: 1, background: "#F4D000", borderRadius: 20, display: "inline-block", marginRight: 5 }} />{this.switchLanguage ? "Tropical strom" : "热带风暴"}</div>
                                        <div style={{ padding: "3px 5px" }}><div style={{ width: 10, height: 10, opacity: 1, background: "#F6F200", borderRadius: 20, display: "inline-block", marginRight: 5 }} />{this.switchLanguage ? "Tropical depression" : "热带低压"}</div>
                                    </div>
                                </div>
                                <div style={{ padding: 8, background: "rgba(0,0,0,.5)", borderRadius: 5, marginBottom: 5, cursor: "pointer" }} onClick={this.handleMapPopupSwiper}>
                                    {this.switchLanguage ? "Alternate playing" : "信息轮播"} {!this.state.openPopup ? <Icon type="caret-right" style={{ verticalAlign: "middle" }} /> : <Icon type="pause" style={{ verticalAlign: "middle" }} />}
                                </div>
                            </div>
                            <div style={{ position: "absolute", bottom: '.5vw', display: "flex", padding: "0 .5vw", width: "100%", justifyContent: "space-between", height: 25 }}>
                                <div style={{ zIndex: 999, color: "white", lineHeight: "25px", verticalAlign: "middle", fontSize: `.8vw` }}>
                                    {this.state.time && this.state.time.slice(0, 4) + "-" + this.state.time.slice(4, 6) + "-" + this.state.time.slice(6, 8) + " " + this.state.time.slice(8, 10) + ":" + this.state.time.slice(10, 12) + " (UTC)"}
                                </div>
                                <div style={{ zIndex: 999, verticalAlign: "middle" }}>
                                    <div className={"select-default-button"} style={{ padding: "0 .25vw", marginRight: "2px" }} onClick={() => {
                                        this.handleAnimationStop();
                                        const current = 0;
                                        const time = this.props.data[current].datetime;
                                        this.handleDatetimeChange(time, current);
                                        this.setState({
                                            start: false,
                                        });
                                    }}><Icon type="step-backward" style={{ verticalAlign: "middle", fontSize: `${window.screen.availWidth / 1920 /10}rem`, lineHeight: "100%" }} /></div>
                                    <div className={"select-default-button"} style={{ padding: "0 .25vw", marginRight: "2px" }} onClick={() => {
                                        this.handleAnimationStop();
                                        if (this.state.current > 0) {
                                            const current = (this.state.current - 1) % this.props.data.length;
                                            const time = this.props.data[current].datetime;
                                            this.handleDatetimeChange(time, current);
                                            this.setState({
                                                start: false,
                                            })
                                        }
                                    }}><Icon type="caret-left" style={{ verticalAlign: "middle", fontSize: `${window.screen.availWidth / 1920/10}rem`, lineHeight: "100%" }} /></div>
                                    <div className={"select-default-button"} style={{ padding: "0 .25vw", marginRight: "2px" }} onClick={() => {
                                        if (this.state.start) {
                                            this.handleAnimationStop();
                                            this.setState({ start: false })
                                        } else {
                                            this.map_background_points.forEach(item => {
                                                item.closePopup();
                                            })
                                            this.setState({ start: true });
                                            this.animation(this.animation_index)
                                        }
                                    }}>{!this.state.start ? <Icon type="caret-right" style={{ verticalAlign: "middle", fontSize: `${window.screen.availWidth / 1920/10}rem`, lineHeight: "100%" }} /> : <Icon type="pause" style={{ verticalAlign: "middle", fontSize: `${window.screen.availWidth / 1920/10}rem`, lineHeight: "100%" }} />}</div>
                                    <div className={"select-default-button"} style={{ padding: "0 .25vw", marginRight: "2px" }} onClick={() => {
                                        this.handleAnimationStop();
                                        const current = (this.state.current + 1) % this.props.data.length;
                                        const time = this.props.data[current].datetime;
                                        this.handleDatetimeChange(time, current);
                                        this.setState({ start: false, })
                                    }}><Icon type="caret-right" style={{ verticalAlign: "middle", fontSize: `${window.screen.availWidth / 1920/10}rem`, lineHeight: "100%" }} /></div>
                                    <div className={"select-default-button"} style={{ padding: "0 .25vw" }} onClick={() => {
                                        this.handleAnimationStop();
                                        const current = this.props.data.length - 1;
                                        const time = this.props.data[current].datetime;
                                        this.handleDatetimeChange(time, current);
                                        this.setState({ start: false });
                                    }}><Icon type="step-forward" style={{ verticalAlign: "middle", fontSize: `${window.screen.availWidth / 1920/10}rem`, lineHeight: "100%" }} /></div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div style={{ background: "rgb(2,30,67)", marginRight: 15, position: "relative" }} className='hide'>
                        <div style={{ zIndex: 3, width: '75vw', height: "100%", opacity: 1,textAlign:"center" }}>
                            <img ref={this.img} onError={function(){this.img.current.src=imgErr;}.bind(this)} style={{ zIndex: 3, width: '75vw', height: "100%", opacity: 1, }} className={`${this.state.showLogo ? "smallLogo" : ""}`} />
                        </div>
                        {
                            this.props.imgClass === "all" && (
                                <div style={{ cursor: "pointer", zIndex: 5, position: "absolute", top: 0, left: 0, border: "1px solid rgb(73,217,254)", height: "100%", width: "100%", color: "rgb(73,217,254)", display: "flex", flexWrap: "wrap" }}>
                                    <div style={{position:'absolute', right:35,top:10,zIndex:111}}>
                                        <img src={xxLogo} alt="气象信息中心logo" style={{width:'13.5vw'}} />
                                    </div>
                                    {/* 数据请求过程中显示logo */}
                                    <div style={{ width: "50%", height: "50%", padding: 5 }} className={`${this.state.showLogo && this.state.start ? "smallLogo" : ""}`} onClick={() => { this.props.handleChangePicture(1) }}>
                                        {this.state.showLogo && this.state.start ? (<div style={{ width: "100%", height: "100%", border: "1px solid rgb(73,217,252)", background: `${this.state.showLogo}?${logo} no-repeat center #073a69:"`, backgroundSize: "30%" }} ></div>) : (<div>{this.switchLanguage ? "Flow fields" : `${this.props.imgSubtitle[0]}`}</div>)}
                                    </div>
                                    <div style={{ width: "50%", height: "50%", padding: 5 }} className={`${this.state.showLogo && this.state.start ? "smallLogo" : ""}`} onClick={() => { this.props.handleChangePicture(2) }}>
                                        {this.state.showLogo && this.state.start ? (<div style={{ width: "100%", height: "100%", border: "1px solid rgb(73,217,252)", background: `${this.state.showLogo}?${logo} no-repeat center #073a69:"`, backgroundSize: "30%" }} ></div>) : (<div>{this.switchLanguage ? "Isosurface of wind speed" : `${this.props.imgSubtitle[1]}`}</div>)}
                                    </div>
                                    <div style={{ width: "50%", height: "50%", padding: 5 }} className={`${this.state.showLogo && this.state.start ? "smallLogo" : ""}`} onClick={() => { this.props.handleChangePicture(3) }}>
                                        {this.state.showLogo && this.state.start ? (<div style={{ width: "100%", height: "100%", border: "1px solid rgb(73,217,252)", background: `${this.state.showLogo}?${logo} no-repeat center #073a69:"`, backgroundSize: "30%" }} ></div>) : (<div>{this.switchLanguage ? "Volume rendering of wind" : `${this.props.imgSubtitle[2]}`}</div>)}
                                    </div>
                                    <div style={{ width: "50%", height: "50%", padding: 5 }} className={`${this.state.showLogo && this.state.start ? "smallLogo" : ""}`} onClick={() => { this.props.handleChangePicture(4) }}>
                                        {this.state.showLogo && this.state.start ? (<div style={{ width: "100%", height: "100%", border: "1px solid rgb(73,217,252)", background: `${this.state.showLogo}?${logo} no-repeat center #073a69:"`, backgroundSize: "30%" }} ></div>) : (<div>{this.switchLanguage ? "Relative humidity" : `${this.props.imgSubtitle[3]}`}</div>)}
                                    </div>
                                </div>
                            )
                        }
                        {
                            this.props.imgClass !== "all" && (
                                <div style={{ zIndex: 5, position: "absolute", top: 0, left: 0, border: "1px solid rgb(73,217,254)", height: "100%", width: "100%", color: "rgb(73,217,254)", display: "flex", flexWrap: "wrap" }}>
                                    <div style={{position:'absolute', right:35,top:10,zIndex:111}}>
                                        <img src={xxLogo} alt="气象信息中心logo" style={{width:'13.5vw'}} />
                                    </div>
                                    {this.state.showLogo && this.state.start ?
                                        (<div style={{ width: "100%", height: "100%", border: "1px solid rgb(73,217,252)", marginLeft: "-1px", background: `${this.state.showLogo}?${logo} no-repeat center #073a69:"`, backgroundSize: "30%" }} ></div>) :
                                        (<div style={{ padding: 5 }}>
                                            {this.props.imgSubtitle === "风流场" ? this.switchLanguage ? "Flow fields" : `${this.props.imgSubtitle}` : ""}
                                            {this.props.imgSubtitle === "风速等值面" ? this.switchLanguage ? "Isosurface of wind speed" : `${this.props.imgSubtitle}` : ""}
                                            {this.props.imgSubtitle === "风速场" ? this.switchLanguage ? "Volume rendering of wind speed" : `${this.props.imgSubtitle}` : ""}
                                            {this.props.imgSubtitle === "相对湿度剖面" ? this.switchLanguage ? "Relative humidity" : `${this.props.imgSubtitle}` : ""}
                                            {this.props.imgSubtitle === "综合" ? this.switchLanguage ? "Integration" : `${this.props.imgSubtitle}` : ""}
                                        </div>)
                                    }
                                </div>
                            )
                        }
                    </div>
                </div>
            </React.Fragment>
        )
    }
}
